<template>
    <div class="post-form">
        <el-form label-width="100px">
            <el-form-item label="标题">
                <el-input v-model="title"
                          :maxlength="20"
                          placeholder="20字符以内"></el-input>
            </el-form-item>
            <el-form-item label="分类">
                <el-select v-model="label" placeholder="请选择分类">
                    <el-option label="科技" value=1></el-option>
                    <el-option label="ACG" value=2></el-option>
                    <el-option label="生活" value=3></el-option>
                    <el-option label="学习" value=4></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="概述">
                <el-input v-model="summary"
                          :maxlength="200"
                          placeholder="请输入概述,200字符以内"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click=fun1()>普通</el-button>
                <el-button @click=fun2()>Markdown</el-button>
            </el-form-item>

            <el-form-item label="正文" v-show="showComponent1">
                <el-input type="textarea" v-model="content" :rows="10" size="default" placeholder="请输入正文"></el-input>
            </el-form-item>

            <div class="box" v-show="showComponent2">
                <MarkDownEditor @sendValue="getValue" />
            </div>

            <el-form-item>
                <el-button type="primary"
                           @click="showDialog"
                           v-loading.fullscreen.lock="fullscreenLoading">发表</el-button>
                <el-button @click="cancelPost">取消</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
import MarkDownEditor from "@/components/Markdown/MarkDownEditor.vue";
import {getWithToken, postWithToken} from "@/net/postAndGetMethodWithToken";
import {ElMessage} from "element-plus";


export default {
    components: {MarkDownEditor}, $axios: undefined,

    data() {
        return {
            title: '',
            label: '',
            content: '',
            summary: '',
            editorType: 0,
            markdownContent: '',
            showComponent1: true,
            showComponent2: false,
            fullscreenLoading: false,
            route: this.$route,
            articleId: this.$route.query.articleId
        };
    },

    methods : {
        getValue(value) {
            this.markdownContent=value
        },
        fun1(){
            if (!this.showComponent1) {
                const self = this;
                self.$confirm('是否确认切换？这将清除你写的内容', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.showComponent1 = !this.showComponent1;
                    this.showComponent2 = !this.showComponent2;
                    this.markdownContent = '';
                    this.editorType = 0
                }).catch(() => {
                    // 用户点击取消或者点击弹窗的×号
                });
            }
        },
        fun2(){
            if (!this.showComponent2) {
                const self = this;
                self.$confirm('是否确认切换？这将清除你写的内容', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.showComponent2 = !this.showComponent2;
                    this.showComponent1 = !this.showComponent1;
                    this.content = '';
                    this.editorType = 1
                }).catch(() => {
                    // 用户点击取消或者点击弹窗的×号
                });
            }
        },
        showDialog() {
            const self = this;
            self.$confirm('是否确认发帖？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                self.submitPost(); // 用户点击确定后，调用 submitPost 方法提交帖子
            })
                .catch(() => {
                    // 用户点击取消或者点击弹窗的×号
                });
        },
        submitPost() {
            if(this.title === ''){
                ElMessage.warning("标题不能为空")
            }
            else if(this.summary === ''){
                ElMessage.warning("概述不能为空")
            }
            else if(this.content === ''&&this.markdownContent===''){
                ElMessage.warning("内容不能为空")
            }
            else if(this.label === ''){
                ElMessage.warning("分类不能为空")
            }
            else{
                // 提交帖子的逻辑
                postWithToken('/api/article/newPost',JSON.stringify({
                    title: this.title,
                    label: this.label,
                    summary: this.summary,
                    editorType: this.editorType,
                    content: this.content,
                    markdownContent: this.markdownContent,
                }),(data,code,message) => {
                    ElMessage.success('发送成功！')
                    this.fullscreenLoading = true
                    setTimeout(() => {
                        this.fullscreenLoading = false
                        window.close()
                    }, 2000)
                },(data,code,message) => {
                    if(code === 40300){
                        ElMessage.warning(message)
                    }
                })
            }
        },
        cancelPost() {
            this.fullscreenLoading = true
            setTimeout(
                ()=>{
                    window.close()
                },2000
            )
        },
    },
}
</script>

<style>
.post-form {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ddd;
}
.box {
    padding: 10px 20px;
}
@media screen and (min-width: 600px) {
    .box {
        padding: 20px 40px;
    }
}
</style>